<template>
    <el-card class="box-card" :style='{width:device == "pad" ? "100%" : "calc((100% - 8px)/2)"}'>
      <div slot="header" class="clearfix">
        <div class="title-left">
          <PartitionTitle title="异常告警" type='line' fontSize="16px"></PartitionTitle>
          <span class='total-fz'>{{abnormalTotal[0] + abnormalTotal[1] + abnormalTotal[2]+ abnormalTotal[3]}}</span>
        </div>
        <div class="more" @click="lookMore">
          <el-link type="warning" :underline="false">更多
            <img src="@/assets/images/workbench/arr-right.png"/>
          </el-link>
        </div>
      </div>

      <div class='el-tabs'>
        <el-link
          class="item"
          :class="(device == 'pad') ? 'item-ipad' : 'item-pc'"
          :underline="false"
          v-for="item in tabList"
          :key='item.name'
          @click="toDetail(item)"
        >
          <img :src="item.path">
          <span class="name">{{item.label}}</span>
          <span class="total-fz" :style="{color:item.num ? item.color : '#606266'}">{{item.num}}</span>
        </el-link>
      </div>

      <abnormal-item-dialog
        :userInfo="userInfo"
        :visible.sync="abnormalData.visible"
        :tabName="abnormalData.tabName"
        :abnormalTotal="abnormalTotal"
        @updateTotal="updateTotal"
      />
    </el-card>
</template>
<script>
  import abnormalItemDialog from "./abnormalItemDialog"
  import {warmWorkList} from "@/api/workbench/index";
  import {abnormalWorkList,approvalWorkList} from "@/api/workbench/index";
  import { mapState } from "vuex";
export default {
  props:{
    userInfo:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      tabList:[
        {label:"待处理",name:"1",path:require("@/assets/images/workbench/warning.png"),num:0,color:"#F54E1E"},
        {label:"进行中",name:"2",path:require("@/assets/images/workbench/doing.png"),num:0,color:"#2F83FF"},
        {label:"待审核上报 ",name:"3",path:require("@/assets/images/workbench/approval.png"),num:0,color:"#FF9300"},
        {label:"今日预警 ",name:"4",path:require("@/assets/images/workbench/todo.png"),num:0,color:"#FF9300"}
      ],
      activeName:"1",
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      abnormalData:{
        tabName:null,
        visible:false
      },
      abnormalAllTotal:0,
      abnormalTotal:[0,0,0,0],
      todoTotal:null,
      doingTotal:null,
      warnTotal:null,
      approvalTotal:null,
      erpProductionLineCode:null,
      refreshTimer:null
    };
  },

  created() {
    this.getWarmWorkList();
    this.getApprovalWorkList();
    this.getAbnormalWorkList("1");
    this.getAbnormalWorkList("2")
    setTimeout(() => {
      this.setRefreshTimer()
    }, 1000);
  },

  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },

  methods:{
    setRefreshTimer(){
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(() => {
        this.getWarmWorkList();
        this.getApprovalWorkList();
        this.getAbnormalWorkList("1");
        this.getAbnormalWorkList("2")
        this.setRefreshTimer();
      },60000)
    },
    getWarmWorkList() {
      const { pageNum, pageSize } = this.pager;
      const param = {
        pageNum,
        pageSize,
      };
      warmWorkList(param)
      .then((res) => {
        this.list = res?.rows || {};
        this.abnormalTotal[3] = res?.total || 0;
        this.tabList[3].num = res?.total || 0;
      })
      .catch(() => {
        this.list = [];
        this.abnormalTotal[3] = 0;
        this.tabList[3].num = 0;
      });
    },

    getApprovalWorkList() {
      const { pageNum, pageSize } = this.pager;
      const param = {
        pageNum,
        pageSize,
      };
      approvalWorkList(param)
      .then((res) => {
        this.list = res?.rows || {};
        this.abnormalTotal[2] = res?.total || 0;
        this.tabList[2].num = res?.total || 0;
      })
      .catch(() => {
        this.list = [];
        this.abnormalTotal[2] = 0;
        this.tabList[2].num = 0
      });
    },

    getAbnormalWorkList(status) {
      const { pageNum, pageSize } = this.pager;
      const param = {
        query:{
          status:status
        },
        pageNum,
        pageSize,
      };
      abnormalWorkList(param)
      .then((res) => {
        this.list = res?.rows || {};
        if(status == 1){
          this.abnormalTotal[0] = res?.total || 0;
          this.tabList[0].num = res?.total || 0;
        }
        else if(status == 2){
          this.abnormalTotal[1] = res?.total || 0;
          this.tabList[1].num = res?.total || 0;
        }
      })
      .catch(() => {
        this.list = [];
        this.abnormalTotal[0] = 0;
        this.abnormalTotal[1] = 0;
        this.tabList[0].num = 0;
        this.tabList[1].num = 0;
      });
    },

    toDetail(item){
      this.abnormalData.visible = true;
      this.abnormalData.tabName = item.name
    },

    //子页面操作需要更新整个数据统计
    updateTotal(val){
      if(val == 1 || val == 2){
        this.getAbnormalWorkList(val)
      }
      else if(val == 3){
        this.getApprovalWorkList()
      }
      else if(val == 4){
        this.getWarmWorkList()
      }
    },

    lookMore(){
      this.$router.push({ path: "/exceptionMgmt/operate"}).catch(()=>{});
    }
  },

  beforeDestroy(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  destroyed(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },

  components:{
    abnormalItemDialog
  }
};
</script>
<style lang="scss" scoped>
.box-card{
  width: 49%;
  .clearfix{
    display:flex;
    justify-content: space-between;
    align-items: center;
    color: #F59A23;
    .title-left{
      display:flex;
      align-items: center;
      flex:1;
      span{
        color:#313131
      }
    }
    .block-title{
      margin-bottom: 0;
    }
    ::v-deep.block-title{
      margin-bottom: 0;
      .title.line{
        color: #313131;
        min-width:auto;
        padding-right:0.5rem;
      }
      .title::before{
        background:#34855B;
      }
    }
    .more{
      font-size:14px;
      .el-link.el-link--warning{
        color:#34855B;
         ::v-deep.el-link--inner{
          display:flex;
          align-items: center;
        }
        img{
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  ::v-deep .el-card__body{
    .el-tabs{
      display: flex;
      align-items: center;
      .item {
        display: flex;
        justify-content: flex-start;
        .el-link--inner{
          display: flex;
          align-items: flex-end;
          img{
            width: 18px;
            height: 18px;
          }
          .name{
            padding:0 6px
          }
        }
      }
      .item-ipad{
        width:120px;
        display: flex;
        justify-content:flex-start;
      }
      .item-ipad:not(:first-child){
        width:160px;
        display: flex;
        justify-content:flex-start;
      }
      .item-pc:not(:last-child){
        margin-right:20px;
      }
      .el-tabs__content{
        margin: 0 0 0.9375rem;
      }
    }
  }
  .total-fz{
    font-size:16px;
    line-height: 16px;
  }
}
</style>
